<template>
  <div class="app-container">
    <label class="title" style="font-size: 20px;color: rgba(0,0,0,.85);font-weight: 600;line-height: 32px">上传失败记录</label>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item>
        <label>记录为空代表所有记录已经同步到云端</label>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="reUpload">重新上传</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">刷新</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="failedList" >
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{scope.$index+(queryParams.pageNo-1)*queryParams.pageSize+1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" align="center" prop="gmtUpload" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.gmtUpload, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上传类型" align="center" prop="type" />
      <el-table-column label="上传地址" align="center" prop="url" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
    import { listFailed, reUpload } from "@/api/business/uploadFailed/uploadFailed";

    export default {
        name: "Failed",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 上传失败记录表格数据
                failedList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    name: null,
                    category: null,
                    type: null,
                    method: null,
                    url: null,
                    gmtUpload: null,
                    content: null,
                    gmtCreated: null,
                    gmtModified: null,
                    isDeleted: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    name: [
                        { required: true, message: "名称不能为空", trigger: "blur" }
                    ],
                    category: [
                        { required: true, message: "上传分类-方法不能为空", trigger: "blur" }
                    ],
                    type: [
                        { required: true, message: "上传类型，json/form不能为空", trigger: "change" }
                    ],
                    method: [
                        { required: true, message: "上传方法不能为空", trigger: "blur" }
                    ],
                    url: [
                        { required: true, message: "上传地址不能为空", trigger: "blur" }
                    ],
                    gmtUpload: [
                        { required: true, message: "上传时间不能为空", trigger: "blur" }
                    ],
                }
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询上传失败记录列表 */
            getList() {
                this.loading = true;
                listFailed(this.queryParams).then(response => {
                    this.failedList = response.data.records;
                    this.total = response.data.totalCount;
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNo = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            /** 重新上传*/
            reUpload(){
                reUpload().then(response => {
                    if("success"===response.status){
                        this.$modal.msgSuccess('重新上传成功，请稍后刷新');
                    }else {
                        this.$modal.msgSuccess('重新上传失败，请重新上传');
                    }
                    this.getList();
                });
            }
        }
    };
</script>
